<!-- author:王丹
     describe:用于用户登录
     update-time：2022-04-27 15：50;2022-04-28;
     修改人：彭心愉
 -->
<template>
  <div class="container">
    <!-- 左上角图片logo -->
    <img src="@/assets/imgl/logo.png" alt="" />
    <!-- //左半边用户角色 -->
    <div class="uli">
      <ul>
        <li v-for="pItem in personList" :key="pItem.id" @click="changeUser(pItem)">
          <input type="radio" name="person"   :checked="pItem.isActive" />
          <span>{{ pItem.name }}</span>
        </li>
      </ul>
      
    <!-- 登录角色切换图标 -->
      <div class="img1" v-for="pItem in personList" :key="pItem.id">
        <img :src="pItem.imgUrl" v-show="pItem.isActive" />
      </div>
    </div>

    <!-- //右半边登录表单-->
    <p>学生实训管理系统</p>
    <div class="myForm">
      <form action="" ref="ruleFormRef" :model="ruleForm">
        <label for="userName" prop="userName" :rules="[{ required: true, message: '请输入用户名',trigger: 'blur'}]"></label>
        <input type="text" v-model="ruleForm.userName" />
        <label for="passWord" prop="passWord" :rules="[{ required: true, message: '请输入密码',trigger: 'blur'}]"></label>
        <input type="text" v-model="ruleForm.passWord" />
        <label for="word" prop="myWord" :rules="[{ required: true, message: '请输入验证码',trigger: 'blur'}]"></label>
        <input type="text" id="word" v-model="ruleForm.myWord" />
      </form>
    </div>

    <!-- 跳转按钮 -->
    <div class="img2">
      <img src="@/assets/imgl/login_btn.png" v-show="isShow" />
      <button @click="intoPage()" @mouseleave="leavePage()"></button>
    </div>
    <div class="login">
      <img src="@/assets/imgl/login.png" />
    </div>
  </div>
</template>

<script>
// import {xxx} from '@/api/login.js'
import { reactive, ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from 'element-plus'
import { useStore  } from "vuex";
import { reqLongin, reqTest } from '@/api'
export default {
  name: "login",
  setup() {
    //li绑定数据数据
    const personList = reactive([
      { id: 1, name: "学生", imgUrl: "./static/imgl/students.png",isActive: false,},
      {id: 2,name: "老师",imgUrl: "./static/imgl/teachers.png", isActive: false, },
      {id: 3,name: "管理员",imgUrl: "./static/imgl/admin.png",isActive: true,},
    ]);

    //表单绑定数据
    const ruleForm = reactive({ userName: "", passWord: "",myWord:""});
    const ruleFormRef = ref(null);
    const router = useRouter();
    const route = useRoute();
    const store = useStore ();
    const isShow = ref(false);
    //根据不同角色更换不同图标
    const changeUser = (pItem) => {
      personList.forEach((item) => {
        item.isActive = false;
      });
      pItem.isActive = true;
    };

    //点击登录按钮/登录功能
    const intoPage = async() => {
      isShow.value = true;
     const result =  await reqLongin()
     console.log(result);
      // if(ruleForm.userName=='' || ruleForm.passWord=='' || ruleForm.myWord==''){
      //    ElMessage.error('请输入正确的信息！！');
      //    return false;
      // }
      personList.forEach((item) => {
        if (item.isActive) {
                // console.log(item.id);
              if (item.id == 1) {
                // 在本地存储身份权限
                  sessionStorage.setItem('USERID','1')
                  router.push({name:'home'})
              } else if (item.id == 2) {
                sessionStorage.setItem('USERID','2')
                router.push({name:'home'})
              }
              else if(item.id == 3) {
                sessionStorage.setItem('USERID','3')
                router.push({name:'home'})
              }
            store.dispatch('getUserId')
            // console.log(store);
        }
        
      });

      // router.push({path:'/studentinfo'})
    };

    //鼠标移出，登录按钮图标隐藏
    const leavePage = () => {
      isShow.value = false;
    };
    return {
      changeUser,leavePage, intoPage,
      ruleFormRef, route,isShow,router,
      personList, ruleForm,
    };
  },
};
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
}
/* 背景 */
.container {
  position: absolute;
  width: 100%;
  height: 720px;
  background: url(~@/assets/imgl/login_bg.png) no-repeat;
  background-size: 1550px 720px;
  z-index: -1;

  .login {
    margin-top: 60px;
    margin-left: 300px;
  }
}
/* <!-- 左半边用户角色 --> */
ul {
  position: absolute;
  margin-top: 110px;
  margin-left: 330px;
  li {
    margin: 50px;
    list-style: none;
    input {
      width: 15px;
      height: 15px;
      margin-left: -10px;
      margin: 10px;
      border: 0;
    }
  }
}
span {
  cursor: pointer;
  font-size: 20px;
  font-weight: bolder;
  color: #3e94ad;
}

/* <!-- //右半边登录表单--> */
p {
  font-size: 23px;
  font-weight: bolder;
  color: #3e94ad;
  position: absolute;
  left: 750px;
  top: 210px;
}
form {
  width: 200px;
  height: 500px;
  position: absolute;
  margin-left: 650px;
  margin-top: 150px;
  input {
    width: 350px;
    height: 60px;
    background-color: rgb(231, 240, 240, 0.9);
    border-radius: 30px;
    border: none;
    margin: 15px;
    text-align: center;
  }
  #word {
    width: 200px;
  }
}

/* 小图标/按钮隐藏 */
.img1 {
  position: absolute;
  margin-top: 135px;
  margin-left: 545px;
  img {
    width: 64px;
    height: 64px;
    position: absolute;
  }
}
.img2 > img {
  cursor: pointer;
  width: 150px;
  height: 150px;
  position: absolute;
  margin-top: 185px;
  margin-left: 1037px;
}
button {
  height: 130px;
  width: 130px;
  border-radius: 50%;
  position: absolute;
  margin-top: 195px;
  margin-left: 1050px;
  background-color: rgba(253, 255, 255, 0);
  border: none;
  cursor: pointer;
}
</style>